import { DoubleLeftOutlined } from '@ant-design/icons';
import { Badge, Checkbox, Col, Collapse, Row } from 'antd';
import IconFont from '@/components/IconFont';
import ErrorTypeManageModal from "@/views/components/ErrorTypeManage";
import Style from './index.module.less';

import { useEffect, useMemo, useState } from 'react';

const { Panel } = Collapse;
export const OrderStateCheckbox = (props) => {
  const { children, checkedStatus, item, value, isUnPayPage, handleCheck, handleOpenErrorConfig } = props;
  const stateList = children?.map((item) => item.value);
  const [indeterminate, setIndeterminate] = useState(true);
  const [checkAll, setCheckAll] = useState(false);

  const [openError, setOpenError] = useState(false);

  const onCheckChange = (list) => {
    setIndeterminate(!!list.length && list.length < children.length);
    setCheckAll(list.length === children.length);
  };
  const onCheckAllChange = (e) => {
    // 计算并集
    const union = Array.from(new Set([...value, ...stateList]));
    // 计算差集
    const difference = value.filter((item) => item !== undefined && !stateList.includes(item));
    const data = e.target.checked ? union : difference;
    setIndeterminate(false);
    setCheckAll(e.target.checked);
    onChange?.(data);
  };

  const checkedList = useMemo(() => {
    return value.filter((item) => stateList.includes(item)) || [];
  }, [value]);

  useEffect(() => {
    onCheckChange(checkedList);
  }, [checkedList]);

  const ErrorTypeManageProps = {
		handleOk() {
			setOpenError(false);
		},
		handleCancel() {
			setOpenError(false);
		}
	}

  const handleChange = (value, type) => {
    if(type == 'isBatch'){
      console.log(value, item)
    }else{
      console.log(value)
    }
  }

  return (
    <Collapse
      className={Style['checkbox-collapse']}
      bordered={false}
      expandIcon={({ isActive }) => <IconFont type='icondown' rotate={isActive ? 0 : 180} style={{ fontSize: '16px', color: '#4E5969' }} />}
      expandIconPosition="end"
      collapsible={isUnPayPage ? 'disabled' : ''}
    >
			{openError && <ErrorTypeManageModal {...ErrorTypeManageProps} />}
      <Panel
        header={
          <div style={{width: '146px', display: 'flex', alignItems: 'center', justifyContent: 'space-between'}} onClick={e=>e.stopPropagation()}>
           <Checkbox value={item.value} indeterminate={checkedStatus.groupIndeterminate} onChange={e=>handleCheck(e.target.checked, 'isBatch')}>
             <div style={{display: "flex", alignItems: 'center'}}>{item.label}&nbsp;<Badge count={item.nums} showZero overflowCount={999999} /></div>
           </Checkbox>
           {!isUnPayPage && <IconFont type='iconsetting' style={{fontSize: '15px'}} onClick={(e)=>{e.stopPropagation();handleOpenErrorConfig(true)}} />}
          </div>
        }
      >
        <Checkbox.Group onChange={handleCheck} value={value}>
        <Row gutter={[0, 6]} style={{ paddingLeft: '20px', paddingTop: '12px' }}>
          {children.map((item) => {
            return (
              <Col span={24} key={item.value}>
                <Checkbox value={item.value}>
                   <div style={{display:"flex",alignItems:'center'}}>{item.label}&nbsp;<Badge count={item.nums} overflowCount={999999} /></div>
                </Checkbox>
              </Col>
            );
          })}
        </Row>
        </Checkbox.Group>
      </Panel>
    </Collapse>
  );
};
